/**
 * 间距工具类
 * 基于 uni.scss 中的间距变量
 */

/* Padding - 动态数值生成（1-100px） */
// 生成 p-1 到 p-100 的动态类
@for $i from 1 through 100 {
	.p-#{$i} {
		padding: #{$i}px;
	}
}

/* Padding - 全方向（语义化类名，保留兼容性） */
.p-0 {
	padding: 0;
}

.p-xs {
	padding: 4px;
}

.p-sm {
	padding: $uni-spacing-col-sm;
}

.p-md {
	padding: $uni-spacing-col-base;
}

.p-lg {
	padding: $uni-spacing-col-lg;
}

.p-xl {
	padding: 20px;
}

.p-2xl {
	padding: 24px;
}

.p-3xl {
	padding: 32px;
}

/* Padding - 水平方向 - 动态数值生成 */
// 生成 px-1 到 px-100 的动态类
@for $i from 1 through 100 {
	.px-#{$i} {
		padding-left: #{$i}px;
		padding-right: #{$i}px;
	}
}

/* Padding - 水平方向（语义化类名，保留兼容性） */
.px-0 {
	padding-left: 0;
	padding-right: 0;
}

.px-xs {
	padding-left: 4px;
	padding-right: 4px;
}

.px-sm {
	padding-left: $uni-spacing-row-sm;
	padding-right: $uni-spacing-row-sm;
}

.px-md {
	padding-left: $uni-spacing-row-base;
	padding-right: $uni-spacing-row-base;
}

.px-lg {
	padding-left: $uni-spacing-row-lg;
	padding-right: $uni-spacing-row-lg;
}

.px-xl {
	padding-left: 20px;
	padding-right: 20px;
}

.px-2xl {
	padding-left: 24px;
	padding-right: 24px;
}

.px-3xl {
	padding-left: 32px;
	padding-right: 32px;
}

/* Padding - 垂直方向 - 动态数值生成 */
// 生成 py-1 到 py-100 的动态类
@for $i from 1 through 100 {
	.py-#{$i} {
		padding-top: #{$i}px;
		padding-bottom: #{$i}px;
	}
}

/* Padding - 垂直方向（语义化类名，保留兼容性） */
.py-0 {
	padding-top: 0;
	padding-bottom: 0;
}

.py-xs {
	padding-top: 4px;
	padding-bottom: 4px;
}

.py-sm {
	padding-top: $uni-spacing-col-sm;
	padding-bottom: $uni-spacing-col-sm;
}

.py-md {
	padding-top: $uni-spacing-col-base;
	padding-bottom: $uni-spacing-col-base;
}

.py-lg {
	padding-top: $uni-spacing-col-lg;
	padding-bottom: $uni-spacing-col-lg;
}

.py-xl {
	padding-top: 20px;
	padding-bottom: 20px;
}

.py-2xl {
	padding-top: 24px;
	padding-bottom: 24px;
}

.py-3xl {
	padding-top: 32px;
	padding-bottom: 32px;
}

/* Padding - 单方向 - 动态数值生成 */
// 生成 pt-1 到 pt-100 的动态类
@for $i from 1 through 100 {
	.pt-#{$i} {
		padding-top: #{$i}px;
	}
	.pr-#{$i} {
		padding-right: #{$i}px;
	}
	.pb-#{$i} {
		padding-bottom: #{$i}px;
	}
	.pl-#{$i} {
		padding-left: #{$i}px;
	}
}

/* Padding - 单方向（语义化类名，保留兼容性） */
.pt-0 {
	padding-top: 0;
}

.pt-xs {
	padding-top: 4px;
}

.pt-sm {
	padding-top: $uni-spacing-col-sm;
}

.pt-md {
	padding-top: $uni-spacing-col-base;
}

.pt-lg {
	padding-top: $uni-spacing-col-lg;
}

.pt-xl {
	padding-top: 20px;
}

.pr-0 {
	padding-right: 0;
}

.pr-xs {
	padding-right: 4px;
}

.pr-sm {
	padding-right: $uni-spacing-row-sm;
}

.pr-md {
	padding-right: $uni-spacing-row-base;
}

.pr-lg {
	padding-right: $uni-spacing-row-lg;
}

.pr-xl {
	padding-right: 20px;
}

.pb-0 {
	padding-bottom: 0;
}

.pb-xs {
	padding-bottom: 4px;
}

.pb-sm {
	padding-bottom: $uni-spacing-col-sm;
}

.pb-md {
	padding-bottom: $uni-spacing-col-base;
}

.pb-lg {
	padding-bottom: $uni-spacing-col-lg;
}

.pb-xl {
	padding-bottom: 20px;
}

.pl-0 {
	padding-left: 0;
}

.pl-xs {
	padding-left: 4px;
}

.pl-sm {
	padding-left: $uni-spacing-row-sm;
}

.pl-md {
	padding-left: $uni-spacing-row-base;
}

.pl-lg {
	padding-left: $uni-spacing-row-lg;
}

.pl-xl {
	padding-left: 20px;
}

/* Margin - 动态数值生成（1-100px） */
// 生成 m-1 到 m-100 的动态类
@for $i from 1 through 100 {
	.m-#{$i} {
		margin: #{$i}px;
	}
}

/* Margin - 全方向（语义化类名，保留兼容性） */
.m-0 {
	margin: 0;
}

.m-xs {
	margin: 4px;
}

.m-sm {
	margin: $uni-spacing-col-sm;
}

.m-md {
	margin: $uni-spacing-col-base;
}

.m-lg {
	margin: $uni-spacing-col-lg;
}

.m-xl {
	margin: 20px;
}

.m-2xl {
	margin: 24px;
}

.m-3xl {
	margin: 32px;
}

/* Margin - 水平方向 - 动态数值生成 */
// 生成 mx-1 到 mx-100 的动态类
@for $i from 1 through 100 {
	.mx-#{$i} {
		margin-left: #{$i}px;
		margin-right: #{$i}px;
	}
}

/* Margin - 水平方向（语义化类名，保留兼容性） */
.mx-0 {
	margin-left: 0;
	margin-right: 0;
}

.mx-xs {
	margin-left: 4px;
	margin-right: 4px;
}

.mx-sm {
	margin-left: $uni-spacing-row-sm;
	margin-right: $uni-spacing-row-sm;
}

.mx-md {
	margin-left: $uni-spacing-row-base;
	margin-right: $uni-spacing-row-base;
}

.mx-lg {
	margin-left: $uni-spacing-row-lg;
	margin-right: $uni-spacing-row-lg;
}

.mx-xl {
	margin-left: 20px;
	margin-right: 20px;
}

.mx-2xl {
	margin-left: 24px;
	margin-right: 24px;
}

.mx-3xl {
	margin-left: 32px;
	margin-right: 32px;
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

/* Margin - 垂直方向 - 动态数值生成 */
// 生成 my-1 到 my-100 的动态类
@for $i from 1 through 100 {
	.my-#{$i} {
		margin-top: #{$i}px;
		margin-bottom: #{$i}px;
	}
}

/* Margin - 垂直方向（语义化类名，保留兼容性） */
.my-0 {
	margin-top: 0;
	margin-bottom: 0;
}

.my-xs {
	margin-top: 4px;
	margin-bottom: 4px;
}

.my-sm {
	margin-top: $uni-spacing-col-sm;
	margin-bottom: $uni-spacing-col-sm;
}

.my-md {
	margin-top: $uni-spacing-col-base;
	margin-bottom: $uni-spacing-col-base;
}

.my-lg {
	margin-top: $uni-spacing-col-lg;
	margin-bottom: $uni-spacing-col-lg;
}

.my-xl {
	margin-top: 20px;
	margin-bottom: 20px;
}

.my-2xl {
	margin-top: 24px;
	margin-bottom: 24px;
}

.my-3xl {
	margin-top: 32px;
	margin-bottom: 32px;
}

/* Margin - 单方向 - 动态数值生成 */
// 生成 mt-1 到 mt-100 的动态类
@for $i from 1 through 100 {
	.mt-#{$i} {
		margin-top: #{$i}px;
	}
	.mr-#{$i} {
		margin-right: #{$i}px;
	}
	.mb-#{$i} {
		margin-bottom: #{$i}px;
	}
	.ml-#{$i} {
		margin-left: #{$i}px;
	}
}

/* Margin - 单方向（语义化类名，保留兼容性） */
.mt-0 {
	margin-top: 0;
}

.mt-xs {
	margin-top: 4px;
}

.mt-sm {
	margin-top: $uni-spacing-col-sm;
}

.mt-md {
	margin-top: $uni-spacing-col-base;
}

.mt-lg {
	margin-top: $uni-spacing-col-lg;
}

.mt-xl {
	margin-top: 20px;
}

.mr-0 {
	margin-right: 0;
}

.mr-xs {
	margin-right: 4px;
}

.mr-sm {
	margin-right: $uni-spacing-row-sm;
}

.mr-md {
	margin-right: $uni-spacing-row-base;
}

.mr-lg {
	margin-right: $uni-spacing-row-lg;
}

.mr-xl {
	margin-right: 20px;
}

.mb-0 {
	margin-bottom: 0;
}

.mb-xs {
	margin-bottom: 4px;
}

.mb-sm {
	margin-bottom: $uni-spacing-col-sm;
}

.mb-md {
	margin-bottom: $uni-spacing-col-base;
}

.mb-lg {
	margin-bottom: $uni-spacing-col-lg;
}

.mb-xl {
	margin-bottom: 20px;
}

.ml-0 {
	margin-left: 0;
}

.ml-xs {
	margin-left: 4px;
}

.ml-sm {
	margin-left: $uni-spacing-row-sm;
}

.ml-md {
	margin-left: $uni-spacing-row-base;
}

.ml-lg {
	margin-left: $uni-spacing-row-lg;
}

.ml-xl {
	margin-left: 20px;
}

.ml-2xl {
	margin-left: 24px;
}

.ml-3xl {
	margin-left: 32px;
}

/* 特殊位置 */
.top-0 {
	top: 0;
}

.top-xs {
	top: 4px;
}

.top-sm {
	top: 8px;
}

.top-md {
	top: 12px;
}

.top-lg {
	top: 20px;
}

.top-full {
	top: 100%;
}

.right-0 {
	right: 0;
}

.right-xs {
	right: 4px;
}

.right-sm {
	right: 8px;
}

.right-md {
	right: 12px;
}

.right-lg {
	right: 20px;
}

.bottom-0 {
	bottom: 0;
}

.bottom-xs {
	bottom: 4px;
}

.bottom-sm {
	bottom: 8px;
}

.bottom-md {
	bottom: 12px;
}

.bottom-lg {
	bottom: 20px;
}

.left-0 {
	left: 0;
}

.left-xs {
	left: 4px;
}

.left-sm {
	left: 8px;
}

.left-md {
	left: 12px;
}

.left-lg {
	left: 20px;
}

